<template>
  <view class="content" ref="btnFullScr">
    <!-- 顶部菜单栏 -->
    <el-titlebar v-if="showTitleBar" @clickmenu='onClickMenu'></el-titlebar>
    <view class="video-wrap">
      <!-- 自定义视频播放控件(在全屏时显示系统自带的控制器) -->
      <!-- poster: 必须在video组件加载时资源就必须准备好, 集成到electron时必须使用网络资源,不能使用本地图片! -->
      <view class="video-box">
        <!-- 用于鼠标移入/移除检测 -->
        <view class="video-nav"></view>
        <!-- 视频播放窗口 -->
        <video class="video" id="myVideo" :src="videoUrl" 
          :controls="showDefControls" 
          :show-play-btn='true' 
          :show-center-play-btn='false' 
          :enable-progress-gesture='false' 
          :enable-play-gesture='false' 
          :autoplay="false" 
          :loop='isLoop' 
          :show-loading="true" 
          :poster="posterUrl" 
          @loadedmetadata="onVideoLoadedMetaData" 
          @timeupdate="onVideoTimeUpdate" 
          @fullscreenchange="onVideoFullScreenChange"
          @play="onVideoPlay" 
          @pause="onVideoPause" 
          @ended="onVideoEnded"> 
        </video>

        <!-- 底部播放控件 -->
        <view v-if="myControlEnabled" class="video-ctrl-wrap">
          <view v-show="showMyControls" class="video-ctrl">
            <view class="video-ctrl-progress">
              <text class="video-ctrl-time" style="text-align: right;">{{formatVideoTime(curPlayTime)}}</text>
              <slider class="video-ctrl-slider" 
                :value="sliderValue" 
                activeColor="#fff"
                backgroundColor="#666" 
                block-color="#fff" 
                :block-size="10"
                @changing="sliderChanging"  
                @change="sliderChange">
              </slider>
              <text class="video-ctrl-time">{{formatVideoTime(videoDuration)}}</text>
            </view>
            <view class="video-ctrl-btns">
              <view class="video-ctrl-btns-left">
                <image v-if="isPlaying" class="video-ctrl-btn" src="../../static/img/btn-pause.png" mode="aspectFit" @click="onBtnPause"></image>
                <image v-else class="video-ctrl-btn" src="../../static/img/btn-play.png" mode="aspectFit" @click="onBtnPlay"></image>
                <image v-if="curPlayTime>0" class="video-ctrl-btn" src="../../static/img/btn-stop.png" mode="aspectFit" @click="onBtnStop"></image>
              </view>
              <view class="video-ctrl-btns-right">
                <!-- 重新开始 -->
                <view class="video-ctrl-btns-reset">
                  <image class="video-ctrl-btn" src="../../static/img/btn-reset.png" mode="aspectFit" @click="onBtnRestart"></image>
                  <view v-if="showCtrlResetTips" class="video-ctrl-btns-reset-pop">重新开始</view>
                </view>
                
                <!-- 设置速率 -->
                <view class="video-ctrl-btns-speed">
                  <view class="video-ctrl-btns-text">倍速</view>
                  <view v-if="showSpeedPop" class="video-ctrl-btns-speed-pop">
                    <view class="video-ctrl-speed-pop-item" :class="{'speed-pop-item-sel':idx==speedIndex}" 
                      v-for="(it, idx) in speeds" :key="idx" @click="setPlaySpeed(idx)">
                      {{it}}x
                    </view>
                  </view>
                </view>
                
                <!-- 最大化 -->
                <image class="video-ctrl-btn" style="margin-right: 0;" src="../../static/img/btn-full.png" mode="aspectFit" @click="onBtnFullScreen"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 右边播放列表 -->
      <view v-if="playListEnabled" class="play-list-wrap" :style="{'width': playListWidth+'px'}" >
        <!-- 自动隐藏按钮 -->
        <view class="list-auto-hide">
          <view v-if="showAutoHideIcon" class="list-auto-hide-icon" @click="autoHidePlayList">
            <text class="list-auto-hide-arrow">{{playListWidth>0 ? '\ue840' : '\ue83d'}}</text>
          </view>
        </view>
        <!--scroll-view 必须指定高度, 否则无法滚动 -->
        <scroll-view class="play-list" :scroll-y="true" :show-scrollbar="false" >
          <view :class="index==playIndex ? 'list-item-sel' : 'list-item-nor'"
            v-for="(item,index) in videoList" :key="index" @click="clickVideoItem(index)">
            <text>{{item.showName}}</text>
            <text class="text-default" v-if="item.default">[待机]</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 视频下载控件 -->
    <video-download ref="popup" class="download-list"></video-download>
    <about-us ref="aboutus"></about-us>
    <hotupdate ref="hotupdate"></hotupdate>
  </view>
</template>

<script>
  import helper from '../../static/js/helper.js'
  import config from '../../static/js/config.js'
  import $ from 'jquery' 
  import autoupdate from '../../components/hotupdate/hotupdateMgr.js' 
  
  var titleBarTimer  = null 
  var videoContext   = null 
  var videoCtrlTimer = null
  var isFullScreen   = false 
  var ctrlSpeedTimer = null 
  var clickSpeedTime = 0 
  var clickSpeedPopItemTime = 0 
  var standbyVideoName = '14-1' //待机视频名 
  var curVideoName     = '' 
  var isManualCheck    = false 
  
  
  export default {
    data() {
      return {
        playListEnabled: false,   //功能"播放列表"是否开启
        myControlEnabled: true,  //功能"底部控件栏"是否开启
        showTitleBar: false,
        showDefControls: false,
        showMyControls: false, 
        showSpeedPop: false,
        showCtrlResetTips: true,
        showAutoHideIcon: false,
        
        showPlayList: true,
        playListWidth: 250, 
        videokey: 0, //用来修改其值使得UI刷新
        videoUrl: '',
        videoList: [
          // { name: '测试视频.mp4', showName:'测试视频', url: '/static/测试视频.mp4' },
        ],
        posterUrl: 'https://polaris.uat.yixincapital.com/aio-web/api/upload/4bd7f0fb57821fb9569e5ec10.png', 
        isLoop: false, 
        playIndex: 0,
        defaultIndex: -1, //待机视频
        speeds: [ '2.0', '1.5', '1.25', '1.0', '0.8', '0.5'],
        speedIndex: 3,
        curPlayTime: 0,
        videoDuration: 0,
        sliderValue: 0,
        sliderMoving: false,
        isPlaying: false,
        renderId: 0, //用于刷新UI 
      }
    },
    onLoad() {
      uni.$on('Evt_RefreshLocalVideo', this.updatePlayList)
      uni.$on('Evt_PlayVideo', this.playVideoFile) 
      uni.$on('Evt_Hotupdate', this.handleHotupdate)
      
      if (config.hotupdateEnabled) {
        isManualCheck = false 
        autoupdate.checkVersion() 
      }
    },
    onReady() {
      var self = this 
      this.initVideoImpl() 
      this.initLocalVideos(true) 
      this.$nextTick(()=>{
        this.autoHidePlayList()
        this.initView() 
        this.$refs.popup.autoDownload(()=>{
          self.playStandbyVideo()
        }) 
      })
      
      helper.startVideoUploadSchedule() 
    },
    destroyed() {
      uni.$off('Evt_RefreshLocalVideo', this.updatePlayList)
      uni.$off('Evt_PlayVideo', this.playVideoFile)
      uni.$off('Evt_Hotupdate', this.handleHotupdate)
      
      if (titleBarTimer) {
        clearTimeout(titleBarTimer)
        titleBarTimer = null 
      }
      if (videoCtrlTimer) {
        clearTimeout(videoCtrlTimer)
        videoCtrlTimer = null 
      } 
    },
    computed: {
      formatVideoTime() {
        return function(sec) {
          if (sec <= 0) {
            return "00 : 00"
          } else {
            let total_seconds = sec // / 1000
            let hours   = Math.floor(total_seconds / 3600)
            let minutes = Math.floor((total_seconds % 3600) / 60)
            let seconds = Math.floor(total_seconds % 60)
            if (hours > 0) {
              if (hours < 10)   hours = '0'+hours;
              if (minutes < 10) minutes = '0'+minutes;
              if (seconds < 10) seconds = '0'+seconds;
              return `${hours} : ${minutes} : ${seconds}`
            } else {
              if (minutes < 10) minutes = '0'+minutes;
              if (seconds < 10) seconds = '0'+seconds;
              return `${minutes} : ${seconds}`
            }
          }
        }
      }
    },
    methods: {
      initView() {
        var self = this 
        
        $('.video-nav').hover(
          function() { // 鼠标移入
            if (titleBarTimer) {
              clearTimeout(titleBarTimer)
              titleBarTimer = null 
            }
            self.showTitleBar = true 
          },
          // function() { // 鼠标移出(注:鼠标停留在标题栏也会误触发此事件,因此在菜单里添加隐藏按钮)
          //   titleBarTimer = setTimeout(()=>{
          //     titleBarTimer = null 
          //     self.showTitleBar = false 
          //   }, 2000)
          // }
        )
        
        // 底部控件自动隐藏
        if (this.myControlEnabled) {
          $('.video-ctrl-wrap').hover( //控件
            function() { // 鼠标移入
              if (videoCtrlTimer) {
                clearTimeout(videoCtrlTimer)
                videoCtrlTimer = null 
              }
              self.showMyControls = true 
            },
            function() { // 鼠标移出
              videoCtrlTimer = setTimeout(()=>{
                videoCtrlTimer = null 
                self.showMyControls = false 
              }, 2000)
            }
          )
          
          $('.video-ctrl-btns-reset').hover(
            function() {
              self.showCtrlResetTips = true 
            },
            function() {
              self.showCtrlResetTips = false 
            }
          )
          
          $('.video-ctrl-btns-speed').hover(
            function() {
              if (ctrlSpeedTimer) {
                clearTimeout(ctrlSpeedTimer)
                ctrlSpeedTimer = null 
              }
              if (Date.now() - clickSpeedPopItemTime < 300) { //防止点击子菜单后没有隐藏
                return;
              }
              self.showSpeedPop = true 
            },
            function() { 
              ctrlSpeedTimer = setTimeout(()=>{
                ctrlSpeedTimer = null 
                self.showSpeedPop = false 
              }, 600)
            }
          )
        }
        
        // 播放列表自动隐藏icon 
        if (this.playListEnabled) {
          $('.play-list-wrap').hover(
            function() { 
              self.showAutoHideIcon = true 
            },
            function() { 
              self.showAutoHideIcon = false 
            }
          )
        } 
        
        videoContext = uni.createVideoContext('myVideo')
      },
      initLocalVideos: async function(isFirstLoaded=false) {
        var self = this 
        console.log('=== initLocalVideos') 
        
        var loalList    = await window.api?.getLocalVideoFiles(false) || [] 
        let preName     = this.videoList.length > this.playIndex ? this.videoList[this.playIndex].showName : '' 
        
        let baseUrl     = 'http://localhost:1003/' // 在 electron 端 video_server.js 基于端口1003创建了本地文件服务
        //this.posterUrl  = baseUrl + 'loading.png'  // 必须使用远程图片
        this.videoList  = loalList.map(it=>{ 
          let idx       = it.name.lastIndexOf('.') 
          let nameNoExt = idx > -1 ? it.name.substring(0, idx) : it.name 
          let url       = baseUrl + it.name // 这里的url表示electron的静态文件服务映射的本机地址
          return { name: it.name, showName: nameNoExt, url} 
        }) 
        
        // this.$nextTick(()=>{
        //   if (!videoContext) {
        //     videoContext = uni.createVideoContext('myVideo')
        //   }
        //   console.log('------------------- 回到首页待机')
        //   window.api?.sceneHomepage( (res)=>{
        //     console.log('---ui:', JSON.stringify(res))
        //   }) 
        // }) 
      },
      
      initVideoImpl() {
        var self = this 
        console.log('ui -- initVideoImpl...')
        
        window.api?.listenSubWinReq()
        
        window.api?.setH5VideoPlayImpl( (option)=>{
          console.log('ui -- VideoImpl, option: ', JSON.stringify(option))
          if (option.type === 'play') {
            let result = self.playVideoFile(option.param) 
            return JSON.stringify(result)
            
          } else if (option.type === 'stop') {
            self.onBtnStop()
            return JSON.stringify({code:200, message:'成功'}) 
          } 
        })
      },
      
      onVideoLoadedMetaData(e) {
        // console.log('--- onVideoLoadedMetaData')
        this.curPlayTime   = 0 
        this.videoDuration = Math.floor(e.detail.duration) 
      },
      onVideoTimeUpdate(e) {
        // console.log('--- onVideoTimeUpdate: ', JSON.stringify(e.detail))
        this.curPlayTime = e.detail.currentTime
        // 首次获取到duration时存储它
        if (this.videoDuration === 0 && e.detail.duration > 0) {
          this.videoDuration = e.detail.duration;
        }
        // 设置滑块位置
        this.sliderValue = this.videoDuration > 0 ? 100*this.curPlayTime/this.videoDuration : 0; 
      },
      onVideoFullScreenChange(e) {
        isFullScreen = e.detail.fullScreen 
        this.showDefControls = isFullScreen 
      },
      onVideoPlay() {
        this.isPlaying = true 
        // this.isLoop = this.playIndex == this.defaultIndex 
      },
      onVideoPause() {
        this.isPlaying = false 
      },
      onVideoEnded() {
        console.log('--- onVideoEnded:', curVideoName)
        if (curVideoName !== standbyVideoName) {
          this.playStandbyVideo() 
        }
      },
      clickVideoItem(index) {
        if (!videoContext || index < 0) return;
        videoContext?.pause()
        // this.videokey++ // 强制刷页面会导致退出全屏
        this.playIndex = index
        this.videoUrl  = this.videoList[this.playIndex].url 
        // console.log('=== 播放: ', this.videoUrl) 
        this.$nextTick(()=>{
          videoContext?.play()
        })
      },
      sliderChanging(e) {
        if (!videoContext) return;
        this.sliderMoving = true 
        
        let ratio = e.detail.value / 100
        videoContext.seek(ratio * this.videoDuration) 
      },
      sliderChange(e) {
        this.sliderMoving = false 
      },
      onBtnPlay() {
        if (!videoContext || this.isPlaying) return;
        videoContext.play() 
      },
      onBtnPause() {
        if (!videoContext) return;
        videoContext.pause() 
      },
      onBtnStop() {
        if (!videoContext) return;
        videoContext.pause() 
        videoContext.seek(0) 
        this.$nextTick(()=>{
          this.curPlayTime = 0 
          this.sliderValue = 0 
          this.isPlaying   = false 
        }) 
      },
      onBtnRestart() {
        if (!videoContext) return;
        videoContext.seek(0) 
        this.$nextTick(()=>{
          this.curPlayTime = 0 
          this.sliderValue = 0 
          if (!this.isPlaying) {
            videoContext.play()
          }
        })
      },
      onBtnFullScreen() {
        if (!videoContext) return;
        videoContext.requestFullScreen() 
      },
      playNextVideo() {
        if (!videoContext || this.videoList.length == 0) return;
        
        videoContext.pause()
        if (++this.playIndex >= this.videoList.length) {
          this.playIndex = 0
        }
        this.videoUrl = this.videoList[this.playIndex].url 
        this.$nextTick(()=>{
          videoContext.play()
        })
      },
      playPreVideo() {
        if (!videoContext || this.videoList.length == 0) return;
        
        videoContext.pause()
        if (this.playIndex > 0) {
          this.playIndex--
        } else {
          this.playIndex = this.videoList.length - 1
        }
        this.videoUrl = this.videoList[this.playIndex].url 
        this.$nextTick(()=>{
          videoContext.play()
        })
      },
      playStandbyVideo() {
        window.api?.sceneHomepage( (res)=>{
          console.log('---ui:', JSON.stringify(res))
        })
      },
      updatePlayList() {
        console.log('=== updatePlayList') 
        this.initLocalVideos() 
      },
      
      // 更新视频关键词、默认视频
      async updateVideoInfos(curName='', playDef=false) {
        if (this.videoList.length == 0) return;
        let preName = curName || (this.videoList.length > this.playIndex ? this.videoList[this.playIndex].showName : '') 
        
        // 4. 更新当前播放的index 
        this.defaultIndex = this.videoList.findIndex(it=>{return it.default}) 
        if (playDef) {
          this.playIndex = this.defaultIndex >= 0 ? this.defaultIndex : 0 
        } else {
          this.playIndex = this.videoList.findIndex(it=>{return it.showName === preName})
          if (this.playIndex == -1) this.playIndex = 0;
        }
        this.videoUrl = this.playIndex < this.videoList.length ? this.videoList[this.playIndex].url : '' 
        this.isLoop   = false 
        this.renderId++ //刷新UI 
        
        console.log('=== updateVideoInfos, playIndex, defaultIndex:', this.playIndex, this.defaultIndex) 
        console.log('=== show video list: ', JSON.stringify(this.videoList)) 
      },
      
      onClickMenu(event, arg) {
        if (event === 'video-download') {
          this.$refs.popup.open()
        } else if (event === 'refresh-play-list') { //刷新播放列表
          this.updatePlayList() 
        } else if (event === 'hide-titlebar') {
          this.showTitleBar = false 
        } else if (event === 'about-us') {
          this.$refs.aboutus.open()
        } else if (event === 'check_update') {
          isManualCheck = true 
          autoupdate.checkVersion() 
        }
        
      },
      autoHidePlayList() {
        this.showPlayList  = !this.showPlayList 
        this.playListWidth = this.showPlayList ? 250 : 0 
        console.log('=== autoHidePlayList: ', this.showPlayList) 
      },
      setPlaySpeed(index) {
        if (!videoContext) return;
        let sp = Number(this.speeds[index]) 
        videoContext.playbackRate(sp) 
        this.speedIndex   = index 
        this.showSpeedPop = false 
        clickSpeedPopItemTime = Date.now()
      },
      playVideoFile(option) {
        console.log(`ui --- playVideoFile, name:${option.name}, loop: ${option.isLoop}`) 
        
        if (this.videoList.length == 0) {
          return {code: 400, message: '视频列表为空'}
        };
        
        // let preName = this.videoList.length > this.playIndex ? this.videoList[this.playIndex].showName : ''
        let result = {code: 400, message: '失败'} 
        this.playIndex = this.videoList.findIndex(it=>{return it.showName === option.name})
        
        if (this.playIndex >= 0 && this.playIndex < this.videoList.length) {
          // videoContext.pause()
          // this.videoUrl = ''
          // this.$nextTick(()=>{
            this.videoUrl = this.videoList[this.playIndex].url 
            this.isLoop   = option.isLoop 
            curVideoName  = option.name 
            this.renderId++ //刷新UI 
            // 这里加延时, 是等待 url 加载完才能播放
            this.$nextTick(()=>{
              videoContext?.play() 
            }) 
            result = {code: 200, message: '成功'} 
          // })
        }
        return result 
      },
      handleHotupdate(info) {
        console.log('ui --- handleHotupdate ', JSON.stringify(info)) 
        // 自动静默更新时如果没有新版本则不弹窗提示 
        if (!isManualCheck && info.state === 'newest') { 
          return 
        } 
        
        // state:  'none' | 'hasNew' | 'newest' | 'fail' | 'progress' 
        if (info.state === 'hasNew') {
          this.$refs.hotupdate.open({ state: info.state, title: '版本更新',  desc: `发现新版本 v${info.newVersion}，是否立即更新？` }) 
        } else if (info.state === 'newest') {
          this.$refs.hotupdate.open({ state: info.state, title: '提示',  desc: '当前已经是最新版本' }) 
        } else if (info.state === 'fail') {
          this.$refs.hotupdate.open({ state: info.state, title: '提示',  desc: '更新失败，请稍后尝试' }) 
        } else if (info.state === 'progress') {
          this.$refs.hotupdate.updateProgress(Math.floor(info.percent))
        } else if (info.state === 'success') {
          this.$refs.hotupdate.updateProgress(100) 
          
          this.$nextTick(()=>{
            this.$refs.hotupdate.close()
            window.api?.installUpdate() //自动安装
          })
          
          // uni.showModal({
          //   title:'提示',
          //   content: '已为您下载更新，是否安装？',
          //   confirmText: '安装',
          //   success(res) {
          //     if (res.confirm) {
          //       window.api?.installUpdate() 
          //     }
          //   }
          // })
        }
      },
      
    }
  }
</script>

<style>
  page {background-color: #1f1f1f;}
</style>
<style scoped>
  @font-face {
    font-family: "iconfont";
    src: url('@/static/font/iconfont.ttf');
  }
  .content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .video-wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 0 0 6px 6px;
    padding: 0 4px 4px 4px;
    background-color: #21282D;
    overflow: hidden;
  }
  .video-nav {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .video-box {
    flex: 1;
    height: 100%;
    z-index: 0;
    position: relative;
  }
  .video {
    width: 100%;
    height: 100%;
  }
  .video-ctrl-wrap {
    width: 100%;
    height: 70px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
  }
  .video-ctrl {
    width: 100%;
    height: 100%;
    padding-top: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
  }
  .video-ctrl-progress {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
  }
  .video-ctrl-time {
    width: 68px;
    font-size: 12px;
    color: #fff;
  }
  .video-ctrl-slider {
    flex: 1;
  }
  .video-ctrl-btns {
    /* flex: 1; */
    width: 100%;
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .video-ctrl-btns-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 24px;
  }
  .video-ctrl-btn {
    width: 20px;
    height: 20px;
    margin: 0 6px;
  }
  .video-ctrl-btns-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 24px;
  }
  .video-ctrl-btns-reset {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .video-ctrl-btns-reset-pop {
    position: fixed;
    bottom: 44px;
    padding: 4px 6px;
    font-size: 8px;
    color: #fff;
    background-color: #454646;
    border-radius: 2px;
  }
  .video-ctrl-btns-speed {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .video-ctrl-btns-speed-pop {
    position: fixed;
    bottom: 70px;
    width: 70px;
    height: 240px;
    border-radius: 4px 4px 0 0;
    background-color: #454646;
  }
  .video-ctrl-speed-pop-item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #fff;
    padding-left: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #5b5b5b;
  }
  .video-ctrl-speed-pop-item:hover {
    background-color: #0b598c;
  }
  .speed-pop-item-sel {
    color: #00aeec;
  }
  .video-ctrl-btns-text {
    font-size: 12px;
    color: #fff;
    padding: 3px 6px;
  }
  .play-list-wrap {
    width: 250px;
    height: 100%;
    position: relative;
    display: flex;
    transition-property: width;
    transition-duration: .3s;
    flex-direction: row;
  }
  .list-auto-hide {
    width: 26px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .list-auto-hide-icon {
    width: 24px;
    height: 40px;
    border-radius: 24px 0 0 24px;
    background-color: #1f1f1f;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 4px;
  }
  .list-auto-hide-arrow {
    font-family: "iconfont";
    font-size: 16px;
    color: #fff;
  }
  .play-list {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #1f1f1f;
  }
  /* scroll-view在h5时不显示滚动条 */
  .play-list ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
  
  .list-item-nor {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 8px;
    margin-top: 3px;
    box-sizing: border-box;
    font-size: 14px;
    color: #a5a5a5;
    
    display: -webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; 
    overflow: hidden;
    text-overflow: ellipsis; 
  }
  .list-item-sel {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 8px;
    margin-top: 3px;
    box-sizing: border-box;
    background-color: #282728;
    font-size: 14px;
    color: #fff;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; 
    overflow: hidden;
    text-overflow: ellipsis; 
  }
  .text-default {
    color: #00ff00;
    margin-left: 4px;
  }
  
  /* h5隐藏滚动条 */
  /deep/ ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
</style>
